<template>
  <view class="containt">
    <u-navbar
      leftText="返回"
      title="奢收多"
      :safeAreaInsetTop="true"
      :placeholder="true"
    >
      <template #left>
        <view class="u-nav-slot">
          <!-- <u-icon name="home" size="30"></u-icon> -->
        </view>
      </template>
    </u-navbar>
    <!-- <view
		:style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
	  ></view> -->
    <!-- 轮播 :autoplay="false" -->
    <u-swiper
      :height="356"
      :list="list1"
      :radius="12"
      @change="(e) => (currentNum = e.current)"
      indicatorStyle="right: 20px"
    >
      <template #indicator>
        <view class="indicator-num">
          <text class="indicator-num__text"
            >{{ currentNum + 1 }}/{{ list1.length }}</text
          >
        </view>
      </template>
    </u-swiper>
    <!-- 今日成交量 -->
    <view class="flexCenter numcard">
      <view class="mR36">
        <view class="redtitle">今日成交量</view>
        <view class="num">{{ dayNum }}</view>
      </view>
      <view class="rightbox">
        <view class="goodtitle redtitle">今日出售商品</view>
        <u-notice-bar  :text="text1" direction="column" icon="" bgColor="#FFFFFF" :customStyle="{padding:'10rpx'}" speed="250" color="#999999" :fontSize="20"></u-notice-bar>
        <u-notice-bar  :text="text2" direction="column" icon="" bgColor="#FFFFFF" :customStyle="{padding:'10rpx'}" speed="250" color="#000000" :fontSize="20"></u-notice-bar>
      </view>
    </view>
    <!-- 鉴定好物 -->
    <view class="goodbox flexCenter">
      <view class="cardbox">
        <view class="title flex"
          ><span class="span">鉴定好物</span>
          <u-icon
            @tap="jumpliucheng(1)"
            color="#999999"
            size="28"
            name="error-circle"
          ></u-icon
        ></view>
        <view class="miaoshu">专业鉴定 快速准确</view>
        <view class="goodbtn" @click="jumppagepan('/pages/jianding/add')">
          我要鉴定
        </view>
        <image
          class="goodimg"
          mode="widthFix"
          src="@/static/img/goodimg1.png"
        ></image>
      </view>
      <view class="cardbox">
        <view class="title flex"
          ><span class="span">出售闲置</span>
          <u-icon
            color="#999999"
            @tap="jumpliucheng(2)"
            size="28"
            name="error-circle"
          ></u-icon
        ></view>
        <view class="miaoshu">专业鉴定 快速准确</view>
        <view class="goodbtn" @click="jumppagepan('/pages/sale/selling')">
          我要出售
        </view>
        <image
          class="goodimg"
          mode="widthFix"
          src="@/static/img/goodimg2.png"
        ></image>
      </view>
    </view>
    <!-- 领域专家 -->
    <view class="lingbox">
      <view class="flexCenterSpaceBetween">
        <view>
          <view class="title">领域专家</view>
          <view class="miaoshu">专业资质·流程严谨·结论准确</view>
        </view>
        <view
          class="flex miaoshu"
          @click="jumppage('/pages/authenticate/index')"
        >
          更多专家<u-icon color="#999999" size="24" name="arrow-right"></u-icon>
        </view>
		
      </view>
      <view class="zhuanjia">
        <view
          v-for="(item, index) in 3"
          :key="item"
          class="toubox"
          :class="{ toutop: item == 2 }"
          @click.stop="
            jumppage(
              '/pages/authenticateInfo/authenticateInfo',
              sortList[index]
            )
          "
        >
          <image
            class="guanimg"
            mode="widthFix"
            :src="imageArray[index]"
          ></image>
         <view
            class=""
            style="border-radius: 50%"
            :class="
              index === 0
                ? 'thirdly'
                : index === 1
                ? 'first'
                : index === 2
                ? 'second'
                : ''
            "
          >
            <!-- <up-avatar size="120" :src="`(${baseimgURL}${sortList[index]?.pic}).trim()`"></up-avatar> -->
			<up-avatar mode="aspectFill" size="120" v-if="sortList[index]" :src="`${baseimgURL}${sortList[index].pic}`"></up-avatar>
			<up-avatar size="120" v-else src=""></up-avatar>
            <!-- <up-avatar size="120" src="http://f.sheshouduo.cn/file/20240125/abbdb3cb24084c9280660f2347f705ce.png"></up-avatar> -->
			<!-- {{sortList[index]?.pic}} -->
	
          </view>

          <view class="name">{{sortList[index]?.name }}</view>
          <view class="value">鉴定{{ sortList[index]?.showorder }}万次</view>
        </view>
      </view>
    </view>
    <gorenzheng ref="maRef" @gorenpage="gorenpage"></gorenzheng>
  </view>
</template>

<script lang="ts" setup>
import { getRecycleOrderopenNum } from "@/utils/api";
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
import gorenzheng from "@/components/gorenzheng";
import { onMounted, ref ,inject,reactive} from "vue";
import guanimg3 from "@/static/img/guanimg3.png";
import guanimg1 from "@/static/img/guanimg1.png";
import guanimg2 from "@/static/img/guanimg2.png";
import { onLoad } from "@dcloudio/uni-app";
import { fetchAppraiser, fetchAppraiserSort } from "@/utils/api/authenticate";
import { fetchConfigList } from "@/api/order";
import { baseimgURL } from '@/config'
const currentNum = ref(0);
const baseimgurl = inject("$baseimgurl");
const list1 = ref([
  `${baseimgurl}/hbanner1.jpg`,
  `${baseimgurl}/hbanner2.jpg`,
  `${baseimgurl}/hbanner3.jpg`,
]);
const state = reactive({
  baseimgurl: baseimgurl
});

const sortList = ref([]);
const dayNum = ref(0);
const pageNum = ref(1);
// const imageArray = ref([
// 	require('@/static/img/guanimg3.png'),
// 	require('@/static/img/guanimg1.png'),
// 	require('@/static/img/guanimg2.png'),
// ])
const imageArray = ref([guanimg3, guanimg1, guanimg2]);
const gorenpage = () => {
  uni.navigateTo({
    url: "/pages/me/authentication",
  });
};
const jumpliucheng = (val) => {
  uni.navigateTo({
    url: `/pages/index/sellingProcess?key=${val}`,
  });
};
const gologin = () => {
  uni.navigateTo({
    url: "/pages/login/index",
  });
};
onMounted(() => {
  // imageArray[0]=guanimg3
  // imageArray[0]=guanimg3
  // imageArray[0]=guanimg3
});
onLoad(async () => {
  // 在组件加载完成时执行的逻辑
  // dayNum
  const { data } = await getRecycleOrderopenNum();
  dayNum.value = data[0].dayNum;
  getAppraiser();
  handleChangeType("special_content")
  handleChangeTypes("home_content")
});
const handleChangeType = async (item : any) => {
	try {
		const { code, msg, data } = await fetchConfigList([item]);
		if (code === "1") {
			uni.setStorageSync("allAgreement", data[0].configContent);
		} else {

		}
	} catch (err) {
		console.error(err);
	}
};
const handleChangeTypes = async (item : any) => {
	try {
		const { code, msg, data } = await fetchConfigList([item]);
		if (code === "1") {
			uni.setStorageSync("allhomesetting", data[0].configContent);
		} else {
			
		}
	} catch (err) {
		console.error(err);
	}
};
const jumppage = (url, item) => {
  if (item) {
    uni.navigateTo({ url: url + "?item=" + JSON.stringify(item) });
    return;
  }
  uni.navigateTo({ url: url });
};
const maRef = ref(null);
const showpop = () => {
  maRef.value.maopen();
};
const jumppagepan = (url, item) => {
  // 改为在里面判断了
  uni.navigateTo({ url: url });
  // let userinfo = uni.getStorageSync("userinfo")
  //   ? JSON.parse(uni.getStorageSync("userinfo"))
  //   : {};
  // if (userinfo.id) {
  //   if (
  //     (userinfo.memberCertificate &&
  //       userinfo.memberCertificate.auditStatus == 0) ||
  //     (userinfo.memberCertificate &&
  //       userinfo.memberCertificate.auditStatus == 1)
  //   ) {
  //     uni.navigateTo({ url: url });
  //   } else {
  //     showpop();
  //   }
  // } else {
  //   gologin();
  // }
};
const text1=ref(['98新 LOUIS VUITTON/路易斯威登 PETITE 手袋','95新 COACH/蔻驰拼色 PVC 女士手包'])
const text2=ref(['95新 COACH/蔻驰拼色 PVC 女士手包','98新 LOUIS VUITTON/路易斯威登 PETITE 手袋'])
const getAppraiser = async (item: object) => {
  //获取当天0点时间戳

  const data = {
    pageNum: pageNum.value,
    pageSize: 10,
    typeCode: "Appraiser",
    query: {},
  };
  const res = await fetchAppraiserSort(data);
  res.data.list.forEach((item, index) => {
    //获取鉴定师入行当天0点时间戳，计算入行距今多少天
    let jujinDay = beforePresentDay(item.practiceTime);
    let jujinYear = beforePresentYear(item.practiceTime);
    item.showYear = jujinYear;
    item.showTag = item.tag ? item.tag.split(",") : "";
    item.showfavorableRate = item.favorableRate.split("%")[0];
    switch (item.appraiseSpeed) {
      case "1":
        item.detailShowOrder =
          addNumber(jujinDay, 1, 1) +
          parseInt(item.appraiseNum ? item.appraiseNum : 0);
        item.showorder = String(
          (addNumber(jujinDay, 1, 1) +
            parseInt(item.appraiseNum ? item.appraiseNum : 0)) /
            10000
        ).replace(/^(.*\..{2}).*$/, "$1");
        break;
      case "2":
        item.detailShowOrder =
          addNumber(jujinDay, 1, 2) +
          parseInt(item.appraiseNum ? item.appraiseNum : 0);
        item.showorder = String(
          (addNumber(jujinDay, 1, 2) +
            parseInt(item.appraiseNum ? item.appraiseNum : 0)) /
            10000
        ).replace(/^(.*\..{2}).*$/, "$1");
        break;
      case "3":
        item.detailShowOrder =
          addNumber(jujinDay, 3, 1) +
          parseInt(item.appraiseNum ? item.appraiseNum : 0);
        item.showorder = String(
          (addNumber(jujinDay, 3, 1) +
            parseInt(item.appraiseNum ? item.appraiseNum : 0)) /
            10000
        ).replace(/^(.*\..{2}).*$/, "$1");
        break;
      case "4":
        item.detailShowOrder =
          addNumber(jujinDay, 2, 1) +
          parseInt(item.appraiseNum ? item.appraiseNum : 0);
        item.showorder = String(
          (addNumber(jujinDay, 2, 1) +
            parseInt(item.appraiseNum ? item.appraiseNum : 0)) /
            10000
        ).replace(/^(.*\..{2}).*$/, "$1");
        break;
      case "5":
        item.detailShowOrder =
          addNumber(jujinDay, 1, 3) +
          parseInt(item.appraiseNum ? item.appraiseNum : 0);
        item.showorder = String(
          (addNumber(jujinDay, 1, 3) +
            parseInt(item.appraiseNum ? item.appraiseNum : 0)) /
            10000
        ).replace(/^(.*\..{2}).*$/, "$1");
        break;
      default:
    }
  });
  sortList.value=res.data.list
  // sortList.value = [...sortList.value, ...res.data.list];
};
//距今多少天
const beforePresentDay = (practiceTime: string) => {
  //入行时间戳
  let rhTime = new Date(practiceTime).getTime();
  //当前时间戳
  let currentDaytimestamp = Date.parse(new Date(new Date(myDate()).getTime()));
  return (currentDaytimestamp - rhTime) / 86400000;
};
//距今多少年
const beforePresentYear = (practiceTime: string) => {
  //入行时间戳
  let rhTime = new Date(practiceTime).getTime();
  //当前时间戳
  let currentDaytimestamp = Date.parse(new Date(new Date(myDate()).getTime()));
  let jujinDay = (currentDaytimestamp - rhTime) / 86400000;
  return Math.floor(jujinDay / 365);
};
//自定义万能加鉴定次数
const addNumber = (totalDay: number, sday: number, frequency: number) => {
  return Math.floor((totalDay / sday) * frequency);
};

//自定义获取日期函数
const myDate = () => {
  var date = new Date();
  return (
    date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate()
  );
};
</script>
<style lang="scss" scoped>
.thirdly {
  border: 2px solid #d7d7d7;
}
.first {
  border: 4px solid #ffbd4c;
}
.second {
  border: 2px solid #e1ab82;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.containt {
  padding: 14rpx 20rpx;
}
/* 轮播指示器 */
.indicator-num {
  padding: 4rpx 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 4rpx;
  width: 49rpx;
  @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 22rpx;
  }
}
/* 今日成交量 */
.numcard {
  background: #ffffff;
  margin: 14rpx 0;
  padding: 14rpx 20rpx;
  .redtitle {
    font-size: 25rpx;
    font-weight: 500;
    color: #953b82;
    white-space: nowrap;
  }
  .num {
    font-size: 38rpx;
    font-weight: bold;
    color: #000000;
    text-align: center;
  }
  .rightbox {
    flex: 1;
    font-size: 22rpx;
    .goodtitle:nth-child(2) {
      color: #999999;
    }
    .goodtitle:nth-child(3) {
      color: #000000;
    }
  }
}
/* 鉴定好物和出售闲置 */
.goodbox {
  margin-bottom: 12rpx;
  .cardbox {
    padding: 22rpx;
    padding-bottom: 0;
    flex: 1;
    background: #ffffff;
    .goodbtn {
      width: 120rpx;
      height: 44rpx;
      background: #953b82;
      border-radius: 4rpx;
      font-size: 19rpx;
      line-height: 44rpx;
      color: #ffffff;
      position: relative;
      top: 30rpx;
      margin-left: 0;
      text-align: center;
    }
    .goodimg {
      width: 100%;
    }
    .title {
      font-size: 29rpx;
      font-weight: 600;
      color: #141212;
      line-height: 40rpx;
      margin-bottom: 6rpx;

      // margin-right: 12rpx;
      .span {
        margin-right: 9rpx;
      }
      .u-icon {
        margin-left: 6rpx;
      }
    }
    .miaoshu {
      font-size: 24rpx;
      color: #78736a;
    }
  }
  .cardbox:nth-child(1) {
    margin-right: 20rpx;
  }
}
/* 领域专家 */
.lingbox {
  background-color: #ffffff;
  padding: 22rpx;
  .title {
    font-size: 31rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 6rpx;
  }
  .miaoshu {
    font-size: 22rpx;
    color: #666666;
    line-height: 32rpx;
  }
  .zhuanjia {
    height: 322rpx;
    background: url("http://f.sheshouduo.cn/x/s1/zhuanpaibg.png")
      no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    padding-top: 81rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
  }
  .name {
    font-size: 25rpx;
    color: #141212;
    text-align: center;
    margin-top: 14rpx;
  }
  .value {
    font-size: 22rpx;
    color: #141212;
    text-align: center;
    color: #666666;
  }
  .toubox {
    position: relative;
  }
  .toutop {
    top: -20rpx;
  }
  .u-avatar {
    border: 2px solid #d7d7d7;
  }
  .guanimg {
    position: absolute;
    top: -30rpx;
    width: 58rpx;
    height: 54rpx;
    z-index: 3;
  }
}
::v-deep .u-notify{
  padding: 0 !important;
}
</style>
